<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容" style="width:30%"></el-input>
    <el-button type="primary" @click="look" style="margin: 10px">查找</el-button>
    <el-button type="primary" @click="outerVisible = true ;">添加用户</el-button>
    <el-table
        :data="tableData"
        style="width: 50%">
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="{row}">
          <el-button type="primary" @click="compile(row)">编辑</el-button>
          <el-button type="danger" @click="deleted(tableData.length-1)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="请输入信息" :visible.sync="outerVisible">
      <el-input v-model="inputname" placeholder="请输入姓名" style="width:30%;margin: 10px"></el-input>
      <el-input v-model="inputphone" placeholder="请输入手机" style="width:30%;margin: 10px"></el-input>
      <el-dialog
          width="30%"
          title="添加成功"
          :visible.sync="innerVisible"
          append-to-body>
        <el-button type="primary" @click="okadd" style="margin: 10px;">确定</el-button>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" v-if="pageConfig.mode===1" @click="innerVisible = true">确定添加</el-button>
        <el-button type="primary" v-if="pageConfig.mode===2" @click="modefly">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//nanoid采用的是分别暴露的形式
// eslint-disable-next-line no-unused-vars
import {nanoid} from 'nanoid'

export default {
  data() {
    return {
      id:nanoid(),
      input: '',
      inputname: '',
      inputphone: '',
      outerVisible: false,
      innerVisible: false,
      tableData: [{
        id: '001',
        name: '王小虎',
        phone: '18880444999'
      }, {
        id:'002',
        name: '王小虎',
        phone: '18880444999'
      }, {
        id: '003',
        name: '王小虎',
        phone: '18880444999'
      }],
      pageConfig: {
        //1:添加模式 2：修改模式
        mode: 1,
        index: -1,
      }
    }
  },

  methods: {
    //查找
    look() {
      //1拿到用户的输入
        console.log(this.input)
      //2获取现有的数据
        console.log(this.tableData.name)
      //现有的和输入的进行比较 如果没有弹出查无此人 如果有则弹出 然后进行更改或者是删除

    },
    //添加
    okadd() {
      this.outerVisible = false,
          this.innerVisible = false;
      // // const tableDataObj = {id:nanoid(),title:e.target.value };
      // // console.log(tableDataObj)
      // const tableDataObj = {id:nanoid(),name:e.target.value,phone:e.target.value}
      // console.log(tableDataObj)
      this.tableData.push({
        id:nanoid(),
        name: this.inputname,
        phone: this.inputphone,

      })
      console.log(this.id)
    },
    //修改
    compile(row) {
      this.pageConfig.mode = 2;
      // 获取修改的值
      this.inputname = row.name;
      this.inputphone = row.phone;
      this.outerVisible = true;

      // 修改
      this.pageConfig.index = this.tableData.findIndex(iter=>iter.id === row.id);
    },
    modefly(){
      if (this.pageConfig.index !== -1) {
        this.tableData[this.pageConfig.index].name = this.inputname;
        this.tableData[this.pageConfig.index].phone = this.inputphone;
      }
      this.outerVisible = false;
    },
    //删除
    deleted(idx) {
      this.tableData.splice(idx-1,1)
    },

  }


}
</script>
<style lang="less" scoped>

</style>